import React, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect } from 'react'
import Memo from './child'
import styles from './index.module.less'

const WithMemo = () => {
	const [count, setCount] = useState(1)
	const [val, setValue] = useState('')
	const [memoCount, setMemoCount] = useState(0)
	const testRef = useRef()

	const expensive = useMemo(() => {
		let sum = 0
		for (let i = 0; i < count * 100; i++) {
			sum += i
		}
		return () => sum
	}, [count])

	useMemo(() => {
		setMemoCount(memoCount + 1)
	}, [val])

	useEffect(() => {
		setMemoCount(memoCount + 1)
	}, [val])

	const click = useCallback(() => {
		console.log(2222)
	}, [])

	useLayoutEffect(() => {
		testRef.current.style.left = `${count * 500 + 300}px`
	}, [])

	return (
		<div>
			<h1>{expensive()}</h1>
			<h4>{count}</h4>
			<h4>{memoCount}</h4>
			{val}
			<div>
				<button onClick={() => setCount(count + 1)}>+c1</button>
				<input value={val} onChange={(event) => setValue(event.target.value)} />
			</div>
			<Memo click={click} />
			<div className={styles.testBox} ref={testRef} />
		</div>
	)
}

export default WithMemo
